<!doctype html>
<html>
<head>
    <script src="../../node_modules/seedrandom/seedrandom.js"></script>
    <script>Math.seedrandom('a22ebc7c488a3a47');</script>
    <script src="../../node_modules/mockdate/src/mockdate.js"></script>
    <script>MockDate.set('2000-01-01', 0);</script>
    <script src="../../node_modules/d3/dist/d3.js"></script>
    <script src="../../packages/d3fc/build/d3fc.js"></script>
    <script src="../index.js"></script>
    <link rel="stylesheet" href="../index.css">
    <link rel="icon" type="image/png" href="">
    <style>
        .container {
            display: grid;
            grid-template-columns: 160px 1fr 160px;
            grid-template-rows: 80px 1fr 80px;
        }

        #top {
            grid-column: 2;
            grid-row: 1;
        }
        #left {
            grid-column: 1;
            grid-row: 2;
        }
        #right {
            grid-column: 3;
            grid-row: 2;
        }
        #bottom {
            grid-column: 2;
            grid-row: 3;
        }
    </style>
</head>

<body>
    <d3fc-group class="container" auto-resize>
        <d3fc-svg id="top" data-orient="horizontal"></d3fc-svg>
        <d3fc-svg id="left" data-orient="vertical"></d3fc-svg>
        <d3fc-svg id="right" data-orient="vertical"></d3fc-svg>
        <d3fc-svg id="bottom" data-orient="horizontal"></d3fc-svg>
    </d3fc-group>
    <script src="index.js"></script>
</body>

</html>
